<script setup lang="ts">
import { computed, ref } from 'vue';
import { useSect } from '../../../composables';
import { EVENTS, GameKernel } from '../../../game';

const { state: sectState } = useSect();

const open = ref(false);
const title = ref('加入条件');

const sectId = ref('');

const currentSect = computed(() => {
  return sectState.value.sectList.find(
    (item) => item.config.id === sectId.value
  );
});

function show(id: string) {
  sectId.value = id;
  open.value = true;
}

function close() {
  open.value = false;
}

function onJoinSubmitClick() {
  if (!currentSect.value) return;
  GameKernel.inst.bus.emit(EVENTS.SECT_JOIN, currentSect.value.config.id);
}

GameKernel.inst.bus.on(EVENTS.SECT_JOIN_SUCCESS, () => {
  close();
});

defineExpose({
  show,
  close,
});
</script>

<template>
  <a-modal
    v-model:open="open"
    wrap-class-name="sect-join-conditions-modal"
    :centered="true"
    :closable="false"
    :footer="null"
  >
    <template #title>
      <div class="w-full text-center">{{ title }}</div>
    </template>
    <div v-if="currentSect">
      <div
        v-for="item in currentSect.conditionProgress"
        class="flex items-center"
      >
        <div>{{ item.description }}</div>
      </div>
      <div class="flex justify-end flex-wrap gap-2 pt-2">
        <a-button :disabled="!currentSect.canJoin" @click="onJoinSubmitClick">
          确定加入
        </a-button>
        <a-button @click="close">关闭</a-button>
      </div>
    </div>
  </a-modal>
</template>

<style>
.sect-join-conditions-modal .ant-modal-content {
  padding: 16px;
}
</style>
